<template>
    <a-modal :title="title" :width="1200" :after-close="reset" @ok="submit">
        <div class="description">
            <div class="title">用户信息</div>
            <div class="flex middle">
                <div class="description-term">用户昵称：{{ form.nikeName }}</div>
                <div class="description-term">绑定电话：{{ form.phone ? form.phone : '无' }}</div>
            </div>
            <el-divider />
            <div class="title">{{ form.statusStr.key === 'toBeWrittenOff' ? '提货信息' : '收货信息' }}</div>
            <div class="flex middle">
                <div class="description-term">
                    {{ form.statusStr.key === 'toBeWrittenOff' ? '提货人' : '收货人' }}：{{ form.realName }}
                </div>
                <div class="description-term">
                    {{ form.statusStr.key === 'toBeWrittenOff' ? '提货电话' : '收货电话' }}：{{ form.userPhone
                    }}
                </div>
                <div v-if="form.statusStr.key !== 'toBeWrittenOff'" class="description-term">
                    {{ form.statusStr.key === 'toBeWrittenOff' ? '提货地址' : '收货地址' }}：{{ form.userAddress }}
                </div>
            </div>
            <el-divider />
            <div class="title">订单信息</div>
            <div class="flex middle wrap">
                <div class="description-term">订单编号：{{ form.orderId }}</div>
                <div class="description-term" style="color: red">订单状态：{{ form.statusStr.value }}</div>
                <div class="description-term">商品总数：{{ form.totalNum }}</div>
                <div class="description-term">商品总价：{{ form.proTotalPrice }}</div>
                <div class="description-term">支付邮费：{{ form.payPostage }}</div>
                <div class="description-term">优惠券金额：{{ form.couponPrice }}</div>
                <div class="description-term">实际支付：{{ form.payPrice }}</div>
                <div class="description-term">抵扣金额：{{ form.deductionPrice }}</div>
                <div v-if="form.refundPrice" class="description-term fontColor3">退款金额：{{ form.refundPrice }}</div>
                <div v-if="form.useIntegral" class="description-term">使用积分：{{ form.useIntegral }}</div>
                <div v-if="form.backIntegral" class="description-term">退回积分：{{ form.backIntegral }}</div>
                <div class="description-term">创建时间：{{ form.createTime }}</div>
                <div v-if="form.refundReasonTime" class="description-term">退款时间：{{ form.refundReasonTime }}</div>
                <div class="description-term">支付方式：{{ form.payTypeStr }}</div>
                <div class="description-term">推广人：{{ form.spreadName | filterEmpty }}</div>
                <div v-if="form.shippingType === 2 && form.statusStr.key === 'notShipped'" class="description-term">
                    门店名称：{{
                        form.storeName }}
                </div>
                <div v-if="form.shippingType === 2 && form.statusStr.key === 'notShipped'" class="description-term">
                    核销码：{{
                        form.user_phone }}
                </div>
                <div class="description-term">商家备注：{{ form.remark }}</div>
                <template v-if="form.statusStr.key === 'toBeWrittenOff' && form.systemStore">
                    <div class="description-term">提货码：{{ form.verifyCode }}</div>
                    <div class="description-term">门店名称：{{ form.systemStore.name }}</div>
                    <div class="description-term">门店电话：{{ form.systemStore.phone }}</div>
                    <div class="description-term">
                        门店地址：{{ form.systemStore.address + form.systemStore.detailedAddress }}
                    </div>
                </template>
            </div>
            <template v-if="form.deliveryType === 'express'">
                <el-divider />
                <div class="title">物流信息</div>
                <div class="flex middle">
                    <div class="description-term">快递公司：{{ form.deliveryName }}</div>
                    <div class="description-term">
                        快递单号：{{ form.deliveryId }}
                        <el-button v-hasPermi="['admin:order:logistics:info']" type="primary" size="mini"
                            style="margin-left: 5px" @click="openLogistics">
                            物流查询
                        </el-button>
                    </div>
                </div>
            </template>
            <template v-if="form.deliveryType === 'send'">
                <el-divider />
                <div class="title">配送信息</div>
                <div class="flex middle">
                    <div class="description-term">送货人姓名：{{ form.deliveryName }}</div>
                    <div class="description-term">送货人电话：{{ form.deliveryId }}</div>
                </div>
            </template>
            <template v-if="form.mark">
                <el-divider />
                <div class="title">用户备注</div>
                <div class="flex middle">
                    <div class="description-term">{{ form.mark }}</div>
                </div>
            </template>
        </div>
    </a-modal>
</template>

<script setup lang="ts">
import { orderDetailApi, getLogisticsInfoApi } from './api';
import { storeorder, type Istoreorder } from './entity';
import { validReg } from '@/utils/validate';

const props = withDefaults(defineProps<{
    data: Partial<Istoreorder>
}>(), {
})
const title = computed(() => props.data.orderId ? '编辑' : '新增')
const { formRef, submit, close } = useDialog({ validCallback: save })

let form = $ref(new storeorder())
watchEffect(() => {
    if (props.data.orderId) {
        orderDetailApi(props.data.orderId).then(res => {
            form.setProps(res)
        })
    }
})

const rules = {
    storeorderName: [validReg('required', '请输入用户名')]
}

onMounted(() => {
})
const emit = defineEmits(['change'])
function save() {
}
function reset() {
    form = new storeorder()
}
</script>

<style lang="less">
.logistics {
    align-items: center;
    padding: 10px 0px;

    .logistics_img {
        width: 45px;
        height: 45px;
        margin-right: 12px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .logistics_cent {
        span {
            display: block;
            font-size: 12px;
        }
    }
}

.trees-coadd {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;

    .scollhide {
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-left: 18px;
        padding: 10px 0 10px 0;
        box-sizing: border-box;

        .content {
            font-size: 12px;
        }

        .time {
            font-size: 12px;
            color: #2d8cf0;
        }

    }
}

.title {
    margin-bottom: 14px;
    color: #303133;
    font-weight: bold;
    font-size: 14px;
}

.description {
    &-term {
        display: table-cell;
        padding-bottom: 5px;
        line-height: 20px;
        width: 50%;
        font-size: 12px;
        color: #606266;
    }

    ::v-deep .el-divider--horizontal {
        margin: 12px 0 !important;
    }
}
</style>